<html>
<head>
<script>
function save() {
    var speedRadios = document.getElementsByName("speed");
    for(var i=0; i < speedRadios.length; i++) {
        if(speedRadios[i].checked) {
            localStorage["speed"] = speedRadios[i].value;
        }
    }

    var moveRadios = document.getElementsByName("move");
    for(var i=0; i < moveRadios.length; i++) {
        if(moveRadios[i].checked) {
            localStorage["moveDepth"] = moveRadios[i].value;
        }
    }

    document.getElementById('saved').innerText = 'Saved.';
    setTimeout(function() {
        document.getElementById('saved').innerText = '';
    }, 1000);
}

function pick() {
    var speedPicked = false;
    var speedRadios = document.getElementsByName("speed");
    for(var i=0; i < speedRadios.length; i++) {
        if(speedRadios[i].value == localStorage["speed"]) {
             speedRadios[i].checked = true;
             speedPicked = true;
        }
    }
    if(!speedPicked) {
        speedRadios[1].checked = true;
    }

    var movePicked = false;
    var moveRadios = document.getElementsByName("move");
    for(var i=0; i < moveRadios.length; i++) {
        if(moveRadios[i].value == localStorage["moveDepth"]) {
             moveRadios[i].checked = true;
             movePicked = true;
        }
    }
    if(!movePicked) {
        moveRadios[1].checked = true;
    }
}
</script>

</head>
<body onload="pick();">
<div>
<b>Speed</b><br />
<input type="radio" name="speed" value="500" /> Fast<br />
<input type="radio" name="speed" value="1000" /> Medium<br />
<input type="radio" name="speed" value="1500" /> Slow<br />
</div>

<b>How many elements on the page move?</b> (experimental)<br />
<input type="radio" name="move" value="1" /> A few<br />
<input type="radio" name="move" value="2" /> A lot<br />
<input type="radio" name="move" value="0" /> All of them<br />
</div>

<input type="button" onclick="save();" value="Save">
<span id="saved" style="color: green; font-weight: bold;"></span>
</body>
</html>
